<template>
  <view class="dialog-wrap" @click.stop="onClick" :style="{backgroundColor: bgColor}">
    <view class="dialog">
        <view class="title">
          <slot name="title">
            <text>{{title}}</text>
          </slot>
        </view>
        <view class="text">
          <slot name="content">
            <text>{{text}}</text>
          </slot>
        </view>
      <slot name="footer" v-if="showFooter">
        <view class="footer">
          <text class="button cancel" v-if="cancelShow" @click.stop="onCancel">{{cancelText}}</text>
          <text class="button confirm" v-if="confirmShow" @click.stop="onConfirm">{{confirmText}}</text>
        </view>
      </slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "hb-dialog",
  props: {
    title: String,
    text: String,
    bgColor: {
      default: 'rgba(0,0,0,0.5)',
      type: String
    },
    confirmText: {
      default: '確定',
      type: String
    },
    cancelShow: {
      default: true,
      type: Boolean
    },
    confirmShow: {
      default: true,
      type: Boolean
    },
    showFooter: {
      default: true,
      type: Boolean
    },
    cancelText: {
      default: '取消',
      type: String
    }
  },
  methods: {
    onCancel() {
      this.$emit('cancel');
    },
    onConfirm() {
      this.$emit('confirm');
    },
    onClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped lang="scss">
  .dialog-wrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    padding: 0 94rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .dialog {
      box-sizing: border-box;
      width: 100%;
      background: #fff;
      border-radius: 8rpx;
      .title {
        display: block;
        text-align: center;
        margin-top: 32rpx;
        margin-bottom: 24rpx;
        color: $hb-text-color;
        font-size: 32rpx;
        font-weight: 500;
      }
      .text {
        padding: 0 24rpx;
        color: $hb-text-color;
        font-size: 28rpx;
      }
      .footer {
        margin-top: 48rpx;
        display: flex;
        align-items: center;
        border-top: 1PX solid $hb-border-color;
        .button {
          font-size: 32rpx;
          padding: 26rpx 0;
          border-left: 1PX solid $hb-border-color;
          &:first-child {
            border-left: 1PX solid rgba(255,255,255,0);
          }
        }
        .cancel {
          flex: 1;
          text-align: center;
          color: $hb-text-color;
        }
        .confirm {
          flex: 1;
          text-align: center;
          color: $hb-primary-color;
        }
      }
    }
  }
</style>
